<template>
	<view>
		<view class="tabs">
            <view v-for="(item,index) in tabs" :key="index" @click="onClickTab(index)" :class="{active: index == active}">{{item.text}}</view>
        </view>
        <scroll-view class="content">
            <view class="f-order-item" catchtap="to_orderDetails" v-for="(item,index) in goodsList" :key="index" @click="toOrderDetail(item.f_order_id)">
            	<view class="order-item f-nw f-j-b f-a-s">
            		<view>
            			<view class="order-info-item">订单时间：{{item.add_time}}</view>
            			<view class="order-info-item">订单号：{{item.f_order_id}}</view>
            			<view v-if="item.courier_number" class="order-info-item">快递单号：{{item.courier_number}}</view>
            			<view v-if="item.courier_company" class="order-info-item">物流：{{item.courier_company}}</view>
            		</view>
            		<view class="order-state f-s-0 " :class="{'order-state-cancel': item.status==0}">{{item.status_name}}</view>
            	</view>
            	<view class="order-item" v-for="(goods,index) in item.list">
                      <view class="order-shopping">
                          <view class="order-shopping-img-wrap f-s-0">
                              <image class="img-100" :src="goods.goods_spec_img"></image>
                          </view>
                          <view class="f-a-b order-shopping-detail">
                              <view class="order-shopping-name t-overflow-clamp">{{goods.goods_name}}</view>
                              <view class="order-shopping-spec-name">{{goods.goods_spec_name}}</view>
                              <view class="f-a-c f-nw f-j-e">
                                  <view class="order-shopping-num"> 共{{goods.nums||1}}件商品</view> 
                                  <view class="order-shopping-price"> <text>小计：</text>¥{{goods.goods_price*goods.nums}}</view>
                              </view>
                          </view> 
                      </view>
                  </view>
            	<view class="order-sum-price">
            		<view class="f-j-e f-a-c">合计：￥{{item.moeny}}</view>
            		<view class="operatio f-j-e f-a-n" v-if="item.status==3">
            			<view class="confirm-shouhuo">确认收货</view>
            		</view>
            	</view>
            </view>
            <view v-show="goodsList.length == 0" class="none">暂无数据</view>
        </scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                goodsList: [],
				tabs: [
                    {
                        text: "全部",
                        type: 0,
                    },
                    {
                        text: "待发货",
                        type: 2,
                    },
                    {
                        text: "待收货",
                        type: 3,
                    },
                    {
                        text: "已完成",
                        type: 4,
                    },
                    {
                        text: "退款售后",
                        type: 5,
                    },
                ],
                active: 0,
			}
		},
		methods: {
			onClickTab(index) {
                this.active = index;
                this.getOrderList()
            },
            toOrderDetail(id) {
                uni.navigateTo({
                    url: "../orderDetail/orderDetail?id="+id,
                })
            },
            getOrderList() {
                this.$api.getOrderList({
                    type: this.tabs[this.active].type,
                    uid: uni.getStorageSync("uid"),
                    skip:0,
                    limit:100
                },{loading: true}).then(res=>{
                    this.goodsList = res.data;
                })
            }
		},
        onLoad({index}) {
            this.active = index || 0;
            this.getOrderList()
        }
	}
</script>

<style>
    .none {
        text-align: center;
        padding: 20px;
        color: #999;
        font-size: 20px;
    }
    /* pages/order/template/orderItem/orderItem.wxss */
    .order-item{
      padding: 24rpx;
      padding-bottom: 14rpx;
      box-sizing: border-box;
      /* box-shadow:0px 4rpx 10rpx 0px rgba(218,218,218,0.5); */
      border-bottom: 2rpx solid rgba(218,218,218,0.5);
      background-color: #fff;
    }
    .order-info{
      font-weight:400;
      font-size: 26rpx;
      color: #333333;
      line-height:36rpx;
    }
    .img-100 {width: 100px;height: 100px;}
    .order-state{
      font-size: 26rpx;
      color: #FF5C54;
      line-height:40rpx;
    }
    .order-state-cancel{
      color: #999
    }
    .order-shopping{
      margin-top: 16rpx;
    }
    .order-shopping-img-wrap{
      width: 156rpx;
      height: 156rpx;
      border-radius: 8rpx;
      overflow: hidden;
      margin-right: 24rpx;
      float: left;
    }
    .order-shopping-detail{
      height: 100%;
    }
    .order-shopping-name{
      font-size: 28rpx;
      color: #333333;
      font-weight:500;
      line-height:40rpx;
      min-width: 482rpx;
      max-height: 80rpx;
    }
    .order-shopping-num{
      font-size: 26rpx;
      color: #666;
      margin-right: 28rpx;
      margin-top: 32rpx;
      margin-left: 12rpx;
    }
    .order-shopping-price{
      font-size: 32rpx;
      color: #FF5A52;
      margin-top: 32rpx
    }
    .order-shopping-price text{
      font-size: 24rpx;
      color: #333333;
    }
    .order-confirm{
      width: 120rpx;
      height: 42rpx;
      border:1px solid #FF5A52;
      color: #FF5A52;
      text-align: center;
      line-height: 42rpx;
      font-size: 24rpx;
      border-radius: 3px;
      margin: 27rpx 0 0 340rpx;
    }
    .order-shopping-spec-name{
       font-size: 24rpx;
       color: #666;
       margin-top: 8rpx;
    }
    .tabs {
        display: flex;
        text-align: center;
        font-size: 12px;
    }
    .tabs .active {
        border-bottom: 2px solid #60CC60;
    }
    .tabs view {
        flex: 1;
        height: 44px;
        line-height: 44px;
    }
    .content {
        height: calc(100vh - 44px);
        padding: 10px;
        box-sizing: border-box;
        background: #f6f6f6;
    }
    /* 隐藏border */
    .nav-class {
      border: none
    }
    
    /* 隐藏border 或激活类 */
    .custom-class .van-hairline--top-bottom::after {
      border-width: 0
    }
    
    .f-order-item {
      margin-bottom: 24rpx;
      border-radius: 20rpx;
      overflow: hidden;
      background-color: #fff;
      box-shadow: 0px 4rpx 10rpx 0px rgba(218, 218, 218, 0.5);
    }
    
    .order-detail {
      padding: 20rpx 30rpx;
    }
    
    .f-order-item .order-info-item {
      padding-bottom: 10rpx;
      font-size: 26rpx;
      margin-right: 20rpx;
      font-weight: 400
    }
    
    .order-sum-price {
      font-size: 28rpx;
      padding: 20rpx;
    }
    
    .order-state-cancel {
      color: #999
    }
    
    .operatio {
      margin-top: 18rpx;
    }
    
    .confirm-shouhuo {
      width: 174rpx;
      height: 52rpx;
      line-height: 52rpx;
      border-radius: 52rpx;
      border: 1rpx solid var(--theme);
      color: var(--theme);
      font-size: 26rpx;
      margin-left: 22rpx;
      text-align: center;
    }
    
    /* 查看物流 */
    .check-logistics {
      width: 174rpx;
      height: 52rpx;
      line-height: 52rpx;
      border-radius: 52rpx;
      border: 1rpx solid #666666;
      color: #666666;
      font-size: 26rpx;
      text-align: center;
    }
    
    
    /* 退款列表 */
    .refund{
      padding-bottom: 22rpx;
    }
    .refundDetail {
      background-color: white;
      padding: 20rpx;
      box-sizing: border-box;
      border-radius: 13rpx;
      width: 94%;
      margin: 0 auto;
      margin-top: 20rpx;
      box-shadow: 0px 4rpx 10rpx 0px rgba(218, 218, 218, 0.5);
    }
    
    .re_top {
      display: flex;
      justify-content: space-between;
      font-size: 28rpx;
    }
    
    .pro_detail {
      margin-top: 30rpx;
      display: flex;
    }
    
    .pro_img {
      width: 190rpx;
      height: 190rpx;
      border-radius: 6rpx;
      flex-shrink: 0;
    }
    
    .pro_right {
      margin-left: 15rpx;
      font-size: 27rpx;
    }
    .pro_tips{
      margin-top: 15rpx;
      font-size: 26rpx;
      color: red;
    }
    .pro_price {
      margin-top: 25rpx;
    }
    
    .refundStatus {
      width: 99%;
      height: 74rpx;
      margin: 0 auto;
      margin-top: 20rpx;
      background-color: #F7F7F7;
      overflow: hidden;
      border-radius: 3px;
    }
    
    .refundStatusDetail {
      margin: 18rpx 0 0 40rpx;
    }
    
    .re_edit {
      margin-top: 15rpx;
      display: flex;
      justify-content: space-between;
    }
    
    .re_edit>view {
      width: 140rpx;
      height: 52rpx;
      border-radius: 30px;
      text-align: center;
      line-height: 52rpx;
      color: red;
      border: 1rpx solid red;
      font-size: 24rpx;
    }
</style>
